<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>统计 地图</title>

    <script type="text/javascript" src="{{ url('js/lib/jquery/jquery.min.js') }}"></script>
</head>

<style>
    .content{
        border: 1px solid #666; border-radius: 10px; padding: 20px; margin:50px auto;width:1000px;min-height: 500px;
    }
</style>

<body>

    <div class="content">

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="map" style="width: 1000px;height:800px;"></div>

    </div>

    <script type="text/javascript">
        var map =   {

            /**
             * 创建 地图
             */
            buildMap : function(){

                //引入地图 json
                $.get('/js/lib/echarts/china.json', function (chinaJson) {
                    echarts.registerMap('china', chinaJson);
                    var chart = echarts.init(document.getElementById('map'));
                    chart.setOption(
                            {
                                data:[
                                        {name: '北京',value: randomData() },
                                        {name: '天津',value: randomData() },
                                        {name: '上海',value: randomData() },
                                        {name: '重庆',value: randomData() },
                                        {name: '河北',value: randomData() },
                                        {name: '河南',value: randomData() },
                                        {name: '云南',value: randomData() },
                                        {name: '辽宁',value: randomData() },
                                        {name: '黑龙江',value: randomData() },
                                        {name: '湖南',value: randomData() },
                                        {name: '安徽',value: randomData() },
                                        {name: '山东',value: randomData() },
                                        {name: '新疆',value: randomData() },
                                        {name: '江苏',value: randomData() },
                                        {name: '浙江',value: randomData() },
                                        {name: '江西',value: randomData() },
                                        {name: '湖北',value: randomData() },
                                        {name: '广西',value: randomData() },
                                        {name: '甘肃',value: randomData() },
                                        {name: '山西',value: randomData() },
                                        {name: '内蒙古',value: randomData() },
                                        {name: '陕西',value: randomData() },
                                        {name: '吉林',value: randomData() },
                                        {name: '福建',value: randomData() },
                                        {name: '贵州',value: randomData() },
                                        {name: '广东',value: randomData() },
                                        {name: '青海',value: randomData() },
                                        {name: '西藏',value: randomData() },
                                        {name: '四川',value: randomData() },
                                        {name: '宁夏',value: randomData() },
                                        {name: '海南',value: randomData() },
                                        {name: '台湾',value: randomData() },
                                        {name: '香港',value: randomData() },
                                        {name: '澳门',value: randomData() }
                                ],
                                /*中国地图*/
                                geo: {
                                    map: 'china',
                                    label: {
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    roam: true,
                                    itemStyle: {
                                        normal: {
                                            areaColor: '#eee',
                                            borderColor: '#111'
                                        },
                                        emphasis: {
                                            areaColor: '#999'
                                        }
                                    }
                                },

                                visualMap: [
                                    {
                                        min: 0,
                                        max: 2500,
                                        left: 'left',
                                        top: 'bottom',
                                        text: ['高','低'],           // 文本，默认为数值文本
                                        calculable: true,
                                        /* 在选中范围中 的视觉元素 */
                                        inRange : {
                                            color: ['lightskyblue','yellow','orangered'],
                                        },
                                        type : 'continuous',
                                        seriesIndex : [1]
                                    }
                                ],
                                series : [

                                    /* 成都 高亮点 */
                                    {
                                        name: 'Top 5',
                                        type: 'effectScatter',
                                        coordinateSystem: 'geo',
                                        data: [{name:'成都',value:[104.06,30.67,273]}],
                                        symbolSize: 30,
                                        showEffectOn: 'render',
                                        rippleEffect: {
                                            brushType: 'stroke'
                                        },
                                        hoverAnimation: true,
                                        label: {
                                            normal: {
                                                formatter: '{b}',
                                                position: 'right',
                                                show: true
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#ffff66',
                                                shadowBlur: 10,
                                                shadowColor: '#333'
                                            }
                                        },
                                        zlevel: 1
                                    },

                                    /* 中国地图 根据 数量显示不同的颜色 */
                                    {
                                        name: 'visit_times',
                                        type: 'map',
                                        map:'china',
                                        mapType: 'china',
                                        roam: true,
                                        label: {
                                            normal: {
                                                show: true
                                            },
                                            emphasis: {
                                                show: true
                                            }
                                        },
                                        /* 中心点颜色 */
                                        itemStyle:{
                                            normal:{
                                                areaColor : '#eee',
                                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                                                    offset: 0, color: '#fff' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'red' // 100% 处的颜色
                                                }], false),
                                                borderColor : '#050',
                                            },
                                            emphasis:{
                                                areaColor : '#eee'
                                            }
                                        },
                                        data:[
                                            {name: '北京',value: randomData() },
                                            {name: '天津',value: randomData() },
                                            {name: '上海',value: randomData() },
                                            {name: '重庆',value: randomData() },
                                            {name: '河北',value: randomData() },
                                            {name: '河南',value: randomData() },
                                            {name: '云南',value: randomData() },
                                            {name: '辽宁',value: randomData() },
                                            {name: '黑龙江',value: randomData() },
                                            {name: '湖南',value: randomData() },
                                            {name: '安徽',value: randomData() },
                                            {name: '山东',value: randomData() },
                                            {name: '新疆',value: randomData() },
                                            {name: '江苏',value: randomData() },
                                            {name: '浙江',value: randomData() },
                                            {name: '江西',value: randomData() },
                                            {name: '湖北',value: randomData() },
                                            {name: '广西',value: randomData() },
                                            {name: '甘肃',value: randomData() },
                                            {name: '山西',value: randomData() },
                                            {name: '内蒙古',value: randomData() },
                                            {name: '陕西',value: randomData() },
                                            {name: '吉林',value: randomData() },
                                            {name: '福建',value: randomData() },
                                            {name: '贵州',value: randomData() },
                                            {name: '广东',value: randomData() },
                                            {name: '青海',value: randomData() },
                                            {name: '西藏',value: randomData() },
                                            {name: '四川',value: randomData() },
                                            {name: '宁夏',value: randomData() },
                                            {name: '海南',value: randomData() },
                                            {name: '台湾',value: randomData() },
                                            {name: '香港',value: randomData() },
                                            {name: '澳门',value: randomData() }
                                        ]
                                    },

                                    /* 各个区域的链接线 */
                                    {
                                        type: 'lines',
                                        zlevel: 2,
                                        effect: {
                                            show: true,
                                            period: 6,
                                            trailLength: 0.3,
                                            color: '#ff6666',
                                            symbol: 'pin',
                                            symbolSize: 8,
                                        },
                                        lineStyle: {
                                            normal: {
                                                color: '#fff',
                                                width: 1,
                                                opacity: 0.1,
                                                curveness: 0.2
                                            }
                                        },
                                        data: [
                                            {'coords':[[113.0823,28.2568],[103.9526,30.7617]]},
                                            {'coords':[[113.0823,28.2568],[114.31,30.52]]}
                                        ]
                                    }

                                ]
                            }
                    );
                });

                var geoCoordMap = {
                    '长沙': [113.0823, 28.2568],
                    '成都': [103.9526, 30.7617],
                    '武汉':[114.31,30.52]
                };
                var data = [
                    {name: '长沙',value: 10},
                    {name: '成都',value: 49},
                    {name: '武汉', value: 273}
                ];


                function randomData() {
                    return Math.round(Math.random()*1000);
                }

            },

            init : function(){
                this.buildMap();
            }
        };


        jQuery(function(){
            map.init();
        });

    </script>

    <!-- 加载 百度 echarts  -->
    <script type="text/javascript" src="{{ @url('js/lib/echarts/echarts.js') }}"> </script>
    {{--<script type="text/javascript" src="{{ @url('js/lib/echarts/china.json.js') }}"> </script>--}}
    {{--<script type="text/javascript" src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>--}}
</body>
</html>